<template>
  <view class="page-wrapper" :style="{paddingTop: `${getSystemInfo.navBarHeight || 70}px`}">
    <navBar title="验证手机号" />
    <phone-form :type='type' @handleNext="handleNext"></phone-form>
    <view class="action-bottom">
      <u-button color="#CF1A1B" @click="goNext" :disabled="loading || params.isNext === false" :loading="loading">下一步</u-button>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import navBar from '@/components/navBar.vue'
  import phoneForm from '@/components/phoneForm.vue'
  export default {
    components: {
      navBar,
      phoneForm
    },
    data() {
      return {
        type: 'password',
        loading: false,
        params: {},
        pageDeviceId: '21ee3669-644a-2be3-e85c-d496c3547858'
      };
    },
    computed: {
      ...mapGetters('user', ['getUserInfo']),
      ...mapGetters('global', ['getSystemInfo'])
    },

    methods: {
      async goNext() {
        try{
          this.loading = true
          const res = await this.$request({
            url: '/user-center/app/users/validMobile',
            data: {
              deviceId: this.pageDeviceId,
              mobile: this.params.mobile,
              smsCode: this.params.smsCode
            }
          })
          if(res && res.respCode === 200) {
            let data = res.datas || ''
            uni.navigateTo({
              url: `/minePack/user/personalInformation/setPassword?data=${data}`
            })
          }
        } catch(err){
          this.$set(this.params,'isNext',false) 
          this.$refs.uToast.show({
            message: err.respMsg || '操作失败',
            duration: '3000',
            position: 'top'
          })
        } finally {
          this.loading = false
        }
      },
      handleNext(data) {
        if (data) {
          this.params = {...data}
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-wrapper {
    background-color: #FFFFFF;

    .action-bottom {
      height: 70px;
      width: 100%;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #FFFFFF;

      /deep/ .u-button {
        width: 90% !important;
      }
    }
  }
</style>